<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <!-- V -->

    <div id="app">
        <!-- 声明式渲染：告知vue，msg的值应该显示p标签里 -->
        <p>{{msg}}</p>
        <p>{{str}}</p>
        <p>我是个p：{{msg}}</p>
        <p>{{msg}}</p>             
    </div>

    <input id="btnChange" type="button" value="修改msg">
    <input id="btnChangeStr" type="button" value="修改str">

</body>
</html>
<!-- vm -->
<!-- <script src="./js/MyVue.js"></script> -->

<script type="module">
    import Vue from "./js/MyVue.js"

    // M:
    let vm = new Vue({
        el:"#app", //el：element,表示当前vue对象对应着那段HTML代码
        data:{
            msg:"hi",
            str:'hello'
        }
    });

    console.log("vm.msg",vm.msg);

    document.getElementById("btnChange").onclick =  function(){
        vm.msg += "1";
    }

    document.getElementById("btnChangeStr").onclick = function(){
        vm.str +="2";
    }



</script>